<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
import RadarScanMaterialProperty from "@/lib/RadarScanMaterialProperty.js"
export default {
    name: 'RadarScanning',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                // terrainProvider: new window.Cesium.CesiumTerrainProvider({
                //     url: 'http://data.mars3d.cn/terrain',
                //     requestWaterMask: true,
                //     requestVertexNormals: true
                // }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            Object.defineProperties(RadarScanMaterialProperty.prototype, {
                color: window.Cesium.createPropertyDescriptor('color'),
                speed: window.Cesium.createPropertyDescriptor('speed')
            })

            window.Cesium.RadarScanMaterialProperty = RadarScanMaterialProperty;
            window.Cesium.Material.RadarScanMaterialProperty = 'RadarScanMaterialProperty';
            window.Cesium.Material.RadarScanMaterialType = 'RadarScanMaterialType';
            window.Cesium.Material.RadarScanMaterialSource =
                `
                uniform vec4 color;
                uniform float speed;

                #define PI 3.14159265359

                czm_material czm_getMaterial(czm_materialInput materialInput){
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec2 scrPt = st * 2.0 - 1.0;
                float time = czm_frameNumber * speed / 1000.0 ;
                vec3 col = vec3(0.0);
                mat2 rot;
                float theta = -time * 1.0 * PI - 2.2;
                float cosTheta, sinTheta;
                cosTheta = cos(theta);
                sinTheta = sin(theta);
                rot[0][0] = cosTheta;
                rot[0][1] = -sinTheta;
                rot[1][0] = sinTheta;
                rot[1][1] = cosTheta;
                vec2 scrPtRot = rot * scrPt;
                float angle = 1.0 - (atan(scrPtRot.y, scrPtRot.x) / 6.2831 + 0.5);
                float falloff = length(scrPtRot);
                material.alpha = pow(length(col + vec3(.5)),5.0);
                material.diffuse =  (0.5 +  pow(angle, 2.0) * falloff ) *   color.rgb    ;
                return material;
                }

                `

            window.Cesium.Material._materialCache.addMaterial(window.Cesium.Material.RadarScanMaterialType, {
                fabric: {
                    type: window.Cesium.Material.RadarScanMaterialType,
                    uniforms: {
                        color: new window.Cesium.Color(1.0, 0.0, 0.0, 1.0),
                        speed: 10.0
                    },
                    source: window.Cesium.Material.RadarScanMaterialSource
                },
                translucent: function () {
                    return true;
                }
            })

            let rader = window.viewer.entities.add({
                position: window.Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),
                name: '雷达扫描',
                ellipse: {
                    semiMajorAxis: 1000.0,
                    semiMinorAxis: 1000.0,
                    material: new window.Cesium.RadarScanMaterialProperty({
                        color: new window.Cesium.Color(1.0, 1.0, 0.0, 0.2),
                        speed: 20.0,
                    }),
                    height: 60,
                    heightReference: window.Cesium.HeightReference.RELATIVE_TO_GROUND,
                    outline: true,
                    outlineColor: new window.Cesium.Color(1.0, 1.0, 0.0, 1.0)
                }
            })
            window.viewer.flyTo(rader)
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  